<template>
  <div
   class="hd1"
  >
    <div class="demo-image">
      <el-image
       class="hd2"
        :src="imag1"
      >
      </el-image>
    </div>
    <span
      class="hd3"
      >星光影城</span
    >
    <div class="hd4">
      <span
      class="hd5"
        @click="router.push('/')"
        >首页</span
      >
      <span
      class="hd6"
        @click="router.push('/movieList')"
        >电影</span
      >
      <span class="hd7"  @click="buy">购票</span>
      <span class="hd7"  @click="myOrder"
        >我的观影</span
      >
      <span
      class="hd8"
        @click="myPush"
        >个性化电影推荐</span
      >
    </div>
    <div style="flex: 1"></div>
    <div class="hd9">
      <el-dropdown>
        <span class="el-dropdown-link" style="color: white">
          <span>{{ user }}</span>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="toLogin">登录账号</el-dropdown-item>
            <el-dropdown-item @click="router.push('/Register')">注册账号</el-dropdown-item>
            <el-dropdown-item @click="router.push('/userInfo')">个人信息</el-dropdown-item>
            <el-dropdown-item @click="router.push('/updateUser')">修改信息</el-dropdown-item>
            <el-dropdown-item @click="quit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { onBeforeMount, ref } from 'vue'
import router from '@/router'
import '@/assets/scss/userCom/hd.scss'
const imag1 = require('@/assets/jiangbei2.png')
const user = ref('登录/注册')

const toLogin = () => {
  sessionStorage.clear()
  router.push('/Login')
}
const quit = () => {
  sessionStorage.clear()
  user.value = '登录/注册'
}
const buy = () => {
  if (JSON.parse(sessionStorage.getItem('username')) !== null) {
    router.push('/Buy')
  } else {
    router.push('/Login')
  }
}
const myOrder = () => {
  if (JSON.parse(sessionStorage.getItem('username')) !== null) {
    router.push('/myOrder')
  } else {
    router.push('/Login')
  }
}
const myPush = () => {
  if (JSON.parse(sessionStorage.getItem('username')) !== null) {
    router.push('/moviePush')
  } else {
    router.push('/Login')
  }
}
onBeforeMount(() => {
  if (JSON.parse(sessionStorage.getItem('username')) !== null) {
    user.value = JSON.parse(sessionStorage.getItem('username'))
  }
})
</script>
<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

#example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
